<template>
  <div class="header">
    <div style="position: absolute; left: 10px; top: 60px">
      <div class="loader" :class="{ paused: isPaused }"></div>
    </div>
    <div class="title">
      <h1>无人智慧培训教室</h1>
    </div>
    <div style="position: absolute; right: 20px; top: 50px; display: flex">
      <div class="custom-button" @click="showTimeDialog">
        <div>
          <span class="my-text">设置</span>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="基础配置"
      width="500"
      style="background-color: #383838"
    >
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 600px; color: #fff"
      >
        <el-form-item label="无人教育时间(秒)：" style="color: #fff">
          <el-input v-model="form.uneducatedTime" />
        </el-form-item>
        <el-form-item label="默认进入无人教育时间(秒)：">
          <el-input v-model="form.uneducatedIntervalTime" />
        </el-form-item>
        <el-form-item label="工具箱服务：">
          <el-input v-model="form.boxUrl" />
        </el-form-item>
        <el-form-item label="人脸识别服务地址：">
          <el-input v-model="form.hardUrl" />
        </el-form-item>
        <el-form-item label="摄像头ip地址：">
          <el-input v-model="form.camera1" />
        </el-form-item>
        <el-form-item label="摄像头ip地址：">
          <el-input v-model="form.camera2" />
        </el-form-item>
        <el-form-item label="摄像头ip地址：">
          <el-input v-model="form.camera3" />
        </el-form-item>
        <el-form-item label="人脸存储地址：">
          <el-input v-model="form.facePath" />
        </el-form-item>
        <el-form-item label="清理抓拍照片：">
          <el-button type="primary" size="small" @click="clearPic"
            >清理</el-button
          >
        </el-form-item>
        <el-form-item label="测试连接工具箱：">
          <el-button type="primary" size="small">连接</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onSubmit"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, watch, reactive } from "vue";
//导入socket
import { useStoreTemplate } from "@store/template";
const store = useStoreTemplate(); // 创建 store 实例
import { status, data, send, open } from "@renderer/utils/websocket";
import { getLocalIpApi } from "@renderer/api/face";
import { updateSetting, getSetting, cleanFace } from "@renderer/api/setting";
import { useRouter } from "vue-router"; // 添加这一行以导入 useRouter
import { ElNotification } from "element-plus";
const router = useRouter();
const isPaused = ref(false); // 状态变量，控制动画
const dialogVisible = ref(false);
//无人教育倒计时时间
const uneducatedTime = ref(300);
const form = ref({
  uneducatedTime: 300,
  uneducatedIntervalTime: 1000,
  boxUrl: "http://127.0.0.1:8080",
  hardUrl: "http://127.0.0.1:5126/safebox/",
  camera1: "192.168.50.64",
  camera2: "192.168.50.164",
  camera3: "127.0.0.1",
  facePath: "c://setting//海康威视人脸抓拍//",
});
let intervalId = null; // 定义定时器 ID

// 监听 data 的变化并打印
watch(data, (newData) => {
  console.log("WebSocket data:", newData);
  const message = JSON.parse(newData); // 解析消息
  //         // 处理消息逻辑
  store.handleSocketMessage(message); // 调用 action 将消息放入 store
});
//清理照片
const clearPic = () => {
  cleanFace().then(() => {
    ElNotification({
      title: "Success",
      message: "清理成功",
      type: "success",
    });
  });
};
//连接工具箱
const connectToolBox = () => {
  open(form.boxUrl);
};
//提交表单
const onSubmit = () => {
  //本地缓存起来
  localStorage.setItem("uneducatedTime", form.uneducatedTime);
  //本地缓存起来
  localStorage.setItem("uneducatedIntervalTime", form.uneducatedIntervalTime);
  updateSetting(form).then(() => {
    ElNotification({
      title: "Success",
      message: "保存成功",
      type: "success",
    });
  });
};
function goHome() {
  router.push("/");
}

function showTimeDialog() {
  dialogVisible.value = true;
}
//设置无人教育时间
async function setUneducatedTime() {
  console.log("设置无人教育时间", uneducatedTime.value);
  await setUneducatedTimeApi({
    time: uneducatedTime.value,
  });
  //本地缓存起来
  localStorage.setItem("uneducatedTime", uneducatedTime.value);
  dialogVisible.value = false;
}
async function getLocalIp() {
  try {
    const { data } = await getLocalIpApi();
    isPaused.value = false; // 切换暂停状态
  } catch (error) {
    isPaused.value = true; // 切换暂停状态
    ElNotification({
      title: "Error",
      message: "无法连接安全教育箱",
      type: "error",
    });
  }
}
function quertSetting() {
  getSetting().then((res) => {
    if (res.code === 2000) {
      form.uneducatedTime = res.data.uneducatedTime;
      form.uneducatedIntervalTime = res.data.uneducatedIntervalTime;
      form.boxUrl = res.data.boxUrl;
      form.hardUrl = res.data.hardUrl;
      form.camera1 = res.data.camera1;
      console.log(form)
    }
  });
}

onMounted(() => {
  quertSetting();
  intervalId = setInterval(getLocalIp, 30000); // 每 30 秒调用一次
});
onBeforeUnmount(() => {
  clearInterval(intervalId); // 组件卸载时清除定时器
});
</script>

<style scoped lang="scss">
@import "./css/my-header.scss";
</style>
